<template>
  <div class="my-counter">
    <button type="button" class="btn btn-light" :disabled='goodObj.goods_count===1' @click="$emit('redFn')">-</button>
    <input type="number" class="form-control inp" v-model.number="goodObj.goods_count">
    <button type="button" class="btn btn-light" @click="$emit('addFn')">+</button>
  </div>
</template>

<script>
//5.增加或减少修改对象数量属性；控制商品最少1件
// 目标: 商品数量 - 控制
// 1. 外部传入数据对象
// 2. v-model关联对象的goods_count属性和输入框 (双向绑定)
// 3. 商品按钮 +和-, 商品数量最少1件
// 4. 侦听数量改变, 小于1, 直接强制覆盖1(防止用户输入负数)
export default {
  watch:{
    goodObj:{
      deep:true,
      //当goodObj的内容发送改变会自动触发handler()方法
      handler(){
      if(this.goodObj.goods_count<1) return this.goodObj.goods_count=1
      }
    }
  },
  props:{goodObj:Object}
}
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn, .inp{
    transform: scale(0.9);
  }
}
</style>